<template>
  <div v-if="tableData">
    <el-form v-model="Info">
      <el-row>
        <span>当前位置:</span>
        <el-button type="primary" plain round size="small" @click="selected = 1"
          >全部商品</el-button
        >
        <el-button type="primary" plain round size="small" @click="selected = 2"
          >审核</el-button
        >
        <el-button type="primary" plain round size="small" @click="selected = 3"
          >商品下架</el-button
        >
      </el-row>
      <div style="margin-top: 15px">
        <el-input placeholder="请输入商品名称" v-model="input" size="small">
          <el-button
            slot="append"
            icon="el-icon-search"
            @click="search"
          ></el-button>
        </el-input>
      </div>
      <el-row style="margin-top: 15px">
        <el-select v-model="value" size="small">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button type="info" plain size="small" style="margin-left: 20px"
          >批量下架</el-button
        >
        <el-button type="warning" plain size="small">批量删除</el-button>
      </el-row>
      <el-row style="margin-top: 30px">
        <h4>商品管理</h4>
      </el-row>

      <!-- 全部商品 -->
      <el-row style="margin-top: 15px" v-show="selected == 1">
        <el-table
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>

          <el-table-column prop="id" label="id" align="center">
          </el-table-column>
          <el-table-column label="图片" width="120" align="center">
            <template slot-scope="scope">
              <img
                :src="
                  require(`../../../../item-server/router/components/commodity/${
                    scope.row.img.split(',')[0]
                  }`)
                "
                alt=""
                width="100%"
                height="100vh"
              />
            </template>
          </el-table-column>
          <el-table-column prop="type" label="种类" align="center">
          </el-table-column>
          <el-table-column prop="kind" label="品类" align="center">
          </el-table-column>
          <el-table-column
            prop="title"
            label="商品名称"
            width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="commodity"
            label="商品介绍"
            width="400"
            align="center"
          >
          </el-table-column>
          <el-table-column label="商品价格" align="center">
            <template slot-scope="scope">
              {{ scope.row.price }}
            </template>
          </el-table-column>
          <el-table-column prop="inventory" label="商品库存" align="center">
          </el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <el-tag>{{ scope.row.state }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="发布时间" width="100" align="center">
            <template slot-scope="scope">{{
              moment(scope.row.date).format("YYYY-MM-DD HH:mm:ss")
            }}</template>
          </el-table-column>
          <el-table-column label="操作" width="150" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <div class="block" v-show="selected == 1">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="4"
          layout="prev, pager, next, jumper"
          :total="20"
        >
        </el-pagination>
      </div>
      <!-- 审核中 -->
      <el-row style="margin-top: 15px" v-show="selected == 2">
        <el-table
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>

          <el-table-column prop="id" label="id" align="center">
          </el-table-column>
          <el-table-column label="图片" width="120" align="center">
            <template slot-scope="scope">
              <img
                :src="
                  require(`../../../../item-server/router/components/commodity/${
                    scope.row.img.split(',')[0]
                  }`)
                "
                alt=""
                width="100%"
                height="100vh"
              />
            </template>
          </el-table-column>
          <el-table-column prop="type" label="种类" align="center">
          </el-table-column>
          <el-table-column prop="kind" label="品类" align="center">
          </el-table-column>
          <el-table-column
            prop="title"
            label="商品名称"
            width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="commodity"
            label="商品介绍"
            width="400"
            align="center"
          >
          </el-table-column>
          <el-table-column label="商品价格" align="center">
            <template slot-scope="scope">
              {{ scope.row.price }}
            </template>
          </el-table-column>
          <el-table-column prop="inventory" label="商品库存" align="center">
          </el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <el-tag>{{ scope.row.state }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="发布时间" width="100" align="center">
            <template slot-scope="scope">{{
              moment(scope.row.date).format("YYYY-MM-DD HH:mm:ss")
            }}</template>
          </el-table-column>
          <el-table-column label="操作" width="150" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <div class="block" v-show="selected == 2">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="4"
          layout="prev, pager, next, jumper"
          :total="20"
        >
        </el-pagination>
      </div>
      <!-- 下架商品 -->
      <el-row style="margin-top: 15px" v-show="selected == 3">
        <el-table
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center">
          </el-table-column>

          <el-table-column prop="id" label="id" align="center">
          </el-table-column>
          <el-table-column label="图片" width="120" align="center">
            <template slot-scope="scope">
              <img
                :src="
                  require(`../../../../item-server/router/components/commodity/${
                    scope.row.img.split(',')[0]
                  }`)
                "
                alt=""
                width="100%"
                height="100vh"
              />
            </template>
          </el-table-column>
          <el-table-column prop="type" label="种类" align="center">
          </el-table-column>
          <el-table-column prop="kind" label="品类" align="center">
          </el-table-column>
          <el-table-column
            prop="title"
            label="商品名称"
            width="150"
            align="center"
          >
          </el-table-column>
          <el-table-column
            prop="commodity"
            label="商品介绍"
            width="400"
            align="center"
          >
          </el-table-column>
          <el-table-column label="商品价格" align="center">
            <template slot-scope="scope">
              {{ scope.row.price }}
            </template>
          </el-table-column>
          <el-table-column prop="inventory" label="商品库存" align="center">
          </el-table-column>
          <el-table-column label="状态" align="center">
            <template slot-scope="scope">
              <el-tag>{{ scope.row.state }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="发布时间" width="100" align="center">
            <template slot-scope="scope">{{
              moment(scope.row.date).format("YYYY-MM-DD HH:mm:ss")
            }}</template>
          </el-table-column>
          <el-table-column label="操作" width="150" align="center">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.$index, scope.row)"
                >编辑</el-button
              >
              <el-button
                size="mini"
                type="danger"
                @click="handleDelete(scope.$index, scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </el-row>
      <div class="block" v-show="selected == 3">
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page.sync="currentPage"
          :page-size="5"
          layout="prev, pager, next, jumper"
          :total="1000"
        >
        </el-pagination>
      </div>
    </el-form>
    <el-dialog title="商品信息编辑" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="商品名称" :label-width="formLabelWidth">
          <el-input v-model="form.title" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品种类" :label-width="formLabelWidth">
          <el-input v-model="form.kind" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品介绍" :label-width="formLabelWidth">
          <el-input v-model="form.commodity" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品价格" :label-width="formLabelWidth">
          <el-input v-model="form.price" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="商品库存" :label-width="formLabelWidth">
          <el-input v-model="form.count" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button
          type="primary"
          @click="
            dialogFormVisible = false;
            modifi();
          "
          >修改</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogFormVisible: false,
      selected: 1,
      input: "",
      Info: "",
      oid: "",
      currentPage: 1,
      value: "",
      pageTotal: "",
      multipleSelection: [],
      form: {
        title: "",
        kind: "",
        commodity: "",
        price: "",
        count: "",
        id: "",
      },
      formLabelWidth: "200px",
      options: [
        {},
        {
          value: "1",
          label: "上衣",
        },
        {
          value: "2",
          label: "下装",
        },
        {
          value: "3",
          label: "鞋类",
        },
        {
          value: "4",
          label: "饰品",
        },
      ],
      tableData: [],
    };
  },
  watch: {
    selected() {
      this.getData();
    },
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    handleEdit(index, row) {
      this.dialogFormVisible = true;
      console.log(index, row);
      let { inventory, commodity, type, title, price, id } = row;
      this.form.title = title;
      this.form.kind = type;
      this.form.count = inventory;
      this.form.commodity = commodity;
      this.form.price = price;
      this.form.id = id;
    },
    modifi() {
      let url = `stroll/update`;
      let data = `id=${this.form.id}&title=${this.form.title}&type=${this.form.kind}&inventory=${this.form.count}&commodity=${this.form.commodity}&price=${this.form.price}`;
      this.axios.put(url, data).then((res) => {
        if (res) {
          this.$message("修改成功，等待审核通过！");
          this.getData();
        }
      });
    },
    handleDelete(index, row) {
      let url = `stroll/delete?id=${row.id}&img=${row.img}`;
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        center: true,
      })
        .then(() => {
          this.$message({
            type: "success",
            message: "删除成功!",
          });
          this.axios.delete(url).then((res) => {
            if (res) {
              this.getData();
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getData();
    },

    search() {
      if (this.input != "" || this.value != "") {
        let url = `stroll/shop?title=${this.input}&kind=${
          this.value
        }&shopId=${sessionStorage.getItem("shopId")}&page=${this.currentPage}`;
        this.axios.get(url).then((res) => {
          this.tableData = res.data;
        });
      } else if (this.input == "" && this.value == "") {
        this.getData();
      }
    },
    getData() {
      let url = `stroll/shop?state=${
        this.selected
      }&shopId=${sessionStorage.getItem("shopId")}&page=${this.currentPage}`;
      this.axios.get(url).then((res) => {
        this.tableData = res.data;
        this.pageTotal = res.data.length;
      });
    },
  },
  mounted() {
    this.getData();
  },
};
</script>

<style lang="scss" scoped>
div {
  line-height: 0;
  margin: 0;
  padding: 0;
  .el-input {
    width: 500px;
  }
}
.block {
  width: 500px;
  margin: 0 auto;
  .el-pagination {
    margin-top: 30px;
  }
}
</style>